<script setup lang="ts">
import addComments from '@/api/addComments';
import { ref } from 'vue';
import { userinfo } from '@/stores/counter';

const user = userinfo();
const { commenting } = addComments();
const props = defineProps({
  // 'type': Number,
  newsId: Number,
  commentId: Number,
  replyCommentId: Number,
  fatherId: Number,
});
const commentContent = ref('');

async function postComment() {
  // if (props.type == 1) {
  const resp = await commenting(
    props.newsId,
    commentContent.value,
    props.commentId,
    props.fatherId,
    props.replyCommentId
  );
  if (resp == 1) {
    commentContent.value = '';
  }
  // } else if (props.type == 2) {
  //   // commenting(user.curArticle.id, Number(user.baseInfo.id), props.newsId, props.type, commentContent.value, String(props.toId), props.commentId)
  // }
}
</script>

<template>
  <div class="comment-all">
    <div
      class="avatar"
      :style="{
        backgroundImage: user.login
          ? `url(${user.baseInfo.avator})`
          : `url(/assets/imgs/defaultAvatar.png)`,
      }"
    ></div>
    <div class="inputing">
      <input
        class="inputs"
        placeholder="写下你的感想与触动吧~"
        v-model="commentContent"
      />
      <div class="submit" @click="postComment">发布</div>
    </div>
  </div>
</template>

<style scoped>
.comment-all {
  display: flex;
  align-items: center;
  margin: 15px 0;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 100%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 15px;
}

.inputing {
  flex: 1;
  height: 40px;
  display: flex;
  border-radius: 5px;
}

.submit {
  background-color: #fc6704;
  display: flex;
  align-items: center;
  color: white;
  border-radius: 0 5px 5px 0;
  margin-left: auto;
  cursor: pointer;
  width: 55px;
  display: flex;
  justify-content: center;
}

.inputs {
  display: flex;
  width: calc(100% - 85px);
  height: 100%;
  border: none;
  border-radius: 5px 0 0 5px;
  font-size: 14px;
  background-color: #dcdcdc;
  padding: 0 15px;
}

.inputs::placeholder {
  color: #868686;
}

.inputs:focus {
  outline: none;
  /* 可选，去除选中时的默认外边框 */
}
</style>
